<template>
	<view>
		<uv-tabs :list="options" keyName="sort" :current="current" @click="handleTabbarClick" :inactiveStyle="inactiveStyle" :activeStyle="activeStyle" :customLine="false"></uv-tabs>
	</view>
</template>

<script>
	import throttle from '@/uni_modules/uv-ui-tools/libs/function/throttle.js';
	var startPoint;
	const app = getApp();
	export default {
		props: {
			options: { // 接收外部传入的选项
				type: Array,
				default: []
			},
			current: { // 接收外部传入的当前选中的选项
				type: Number,
				default: 0,
			}
		},
		data() {
			return {
				needLeft: false,
				needRight: false,
				inactiveStyle: {
					fontWeight: '600',
					fontSize: '32rpx',
					color: 'rgba(255,255,255,0.6)',
					lineHeight: '45rpx'
				},
				activeStyle: {
					fontWeight: '600',
					fontSize: '32rpx',
					color: '#FFFFFF',
					lineHeight: '45rpx'
				},
				itemStyle: {
					height: '117rpx',
				}
			};
		},
		watch: {
			current: {
				handler(newVal, oldVal) {
					const {
						options
					} = this;
					if (options.length > 5) {
						if (newVal > oldVal && (newVal == 3 || newVal == 4)) {
							this.needLeft = true
							this.needRight = false
						} else if (newVal < oldVal && (newVal == options.length - 4 || newVal == 2)) {
							this.needLeft = false
							this.needRight = true
						}
					}
				},
				immediate: true
			},
		},
		methods: {
			handleTabbarClick(e) { // 处理tabbar选项的点击事件
				this.$emit('change', { // 将当前选中的选项通过properties传递给外部
					current: e.index,
					list: e.episodes_list
				})
			}
		}
	};
</script>

<style>
	.tabbar {
		width: 686rpx;
		display: flex;
		justify-content: space-between;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 30rpx;
		line-height: 42rpx;
		text-align: center;
		overflow: auto;
	}

	/* 	.container-small {
		width: 100vw;
		height: 65rpx;
		border-bottom: 1rpx solid rgba(22, 24, 35, 0.12);
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #FFFFFF;
	} */

	.box {
		display: flex;
		/* justify-content: space-between; */
	}

	/* 左滑 */
	.tabbar-translate-left {
		/* position: relative; 或其他定位属性 */
		/* transform-origin: 0 0; 设置新的定位基准 */
		transform: translateX(-514rpx);
		transition: all 0.5s linear;
		/* position: absolute;
	    left: 514rpx; */
	}

	/* 右滑 */
	.tabbar-translate-right {
		position: relative;
		/* 或其他定位属性 */
		transform-origin: 0 0;
		/* 设置新的定位基准 */
		transform: translateX(0rpx);
		/* position: absolute;
	    right: 514rpx; */
	}

	.tabbar-small {
		width: 686rpx;
		display: flex;
		/* justify-content: space-around; */
	}

	.tabbar-item {
		width: auto;
		min-width: 68rpx;
		font-family: 'PingFang SC';
		font-weight: 400;
		font-size: 32rpx;
		line-height: 42rpx;
		text-align: center;
		color: rgba(255, 255, 255, 0.6);
		margin-right: 48rpx;
		white-space: nowrap;
	}

	.active {
		font-weight: 500;
		font-size: 32rpx;
		line-height: 42rpx;
		text-align: center;
		color: #FFFFFF;
		padding-bottom: 20rpx;
		position: relative;
	}

	.active::after {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		font-family: "dy-iconfont";
		content: "\e63e";
		font-size: 20rpx;
		line-height: normal;
		background-image: linear-gradient(to right, rgba(255, 168, 0, 1), rgba(255, 111, 0, 1));
		-webkit-background-clip: text;
		/* 背景被裁剪成文字的前景色 */
		-webkit-text-fill-color: transparent;
		/* 文字填充颜色变透明 */

		box-sizing: border-box;
	}

	/* .container{
	    width: 100%;
	    height: 58rpx;
	    background: #FFFFFF;
	    position: fixed;
	    top: 0;
	    z-index: -1;
	} */
	/* 隐藏滚动条 */
	::-webkit-scrollbar {
		display: none;
	}
</style>